<script lang="ts" setup>
	//待寄件的寄件页面,填写售后地址
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let postObj = ref()
	onLoad((option) => {
		console.log(option);
		postObj.value = JSON.parse(option.data)
	})
	const routerLink = (e) => {
		router.push({
			name: e,
			params: {}
		})
	}
	let form1 = ref({
		num: '',
		company: '',
	})
	let rules = ref({
		num: {
			type: 'string',
			required: true,
			message: '输入不合法',
			trigger: ['blur', 'change']
		},
		company: {
			type: 'string',
			required: true,
			message: '输入不合法',
			trigger: ['blur', 'change']
		},
	})
	const submitMsg = () => {
		proxy.$req('POST', proxy.$api.jihuiYouji, {
			id: postObj.value.orderInfoList[0].orderReturn.id,
			refundExpressName: form1.value.company,
			refundExpress: form1.value.num
		}).then((res) => {
			console.log(res);
			uni.$u.toast(res.message)
			if (res.success) {
				uni.navigateBack({
					delta: 1
				})
			}
		})
	}
</script>
<template>
	<view class="container">
		<view class="cTit">
			收件信息
		</view>
		<view class="info">
			<view class="infoItem r-flex-start-start">
				<text>联系人</text>
				<text>{{ postObj.orderInfoList[0].orderReturn.contactsUser }}</text>
			</view>
			<view class="infoItem r-flex-start-start">
				<text>联系电话</text>
				<text>{{ postObj.orderInfoList[0].orderReturn.contactsPhone }}</text>
			</view>
			<view class="infoItem r-flex-start-start">
				<text>收获地址</text>
				<text>{{ postObj.orderInfoList[0].orderReturn.contactsAddress }}</text>
			</view>
		</view>
	</view>
	<view class="message">
		<view class="mTit">
			请填写发货信息
		</view>
		<view class="formBox">

			<u--form labelPosition="left" :model="form1" :rules="rules" ref="form" labelWidth="150rpx">
				<u-form-item class="formItem" label="快递公司" prop="company" borderBottom>
					<u--input v-model="form1.company" border="none" placeholder="请输入快递公司"></u--input>
				</u-form-item>
				<u-form-item class="formItem" label="快递单号" prop="num" borderBottom>
					<u--input v-model="form1.num" border="none" placeholder="请输入运单号"></u--input>
				</u-form-item>
			</u--form>
		</view>
	</view>
	<view class="subBtn" @click="submitMsg">
		提交
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	:deep(.uni-input-input) {
		text-align: right;
	}

	:deep(.uni-input-placeholder) {
		text-align: right;
	}

	.container {
		box-sizing: border-box;
		padding: 32rpx;
		width: 686rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.cTit {
			margin: 0rpx 0 10rpx;
			font-weight: 600;
		}

		.info {
			.infoItem {
				line-height: 50rpx;

				text:nth-child(1) {
					display: inline-block;
					width: 150rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 0.85);
				}

				text:nth-child(2) {
					display: inline-block;
					width: 500rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.85);
				}
			}
		}
	}

	.message {
		box-sizing: border-box;
		padding: 32rpx;
		width: 686rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.mTit {
			margin: 0rpx 0 0;
			font-size: 32rpx;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.85);
		}

		.formBox {
			// width: 686rpx;
			margin: 0 auto;

			.formItem {
				// height: 100rpx;
				text-align: right;
			}
		}
	}

	.message::before {
		content: '';
	}

	.subBtn {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #CB645E;
		border-radius: 16rpx;
		position: fixed;
		bottom: 70rpx;
		left: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>